<template>
  <el-table
    :data="list"
    border
    style="width: 100%"
    height="500"
  >
    <el-table-column
      prop="buttonName"
      label="按钮名称"
    />
    <el-table-column
      width="55"
      label="操作"
    >
      <template slot-scope="{row}">
        <input :key="row.id" :checked="row.auth == '1' ? 'checked':''" type="checkbox" @change="selectChange(row,$event.target.checked)">
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { AddRoleMenuButtonAuth, DeleteRoleMenuButtonAuth, GetRoleButtonList } from '@/api/SystemManagerApi'

export default {
  // eslint-disable-next-line vue/require-prop-types
  props: ['menuid', 'roleid'],
  data() {
    return {
      formVisible: false,
      tableVisible: true,
      fromTemp: {
        id: null,
        buttonName: '',
        attr: '',
        menuId: '',
        url: ''
      },
      list: []
    }
  },
  watch: {
    menuid: {
      immediate: true, // 很重要！！！
      handler(val) {
        this.getList()
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      GetRoleButtonList(this.menuid, this.roleid).then(response => {
        this.list = response.data
        this.listLoading = false
        console.info(JSON.stringify(this.list))
      })
    },
    selectChange(row, checked) {
      if (checked) {
        AddRoleMenuButtonAuth({ 'menuId': this.menuid, 'roleId': this.roleid, 'menuButtonId': row.id }).then(response => {
        })
      } else {
        DeleteRoleMenuButtonAuth({ 'menuId': this.menuid, 'roleId': this.roleid, 'menuButtonId': row.id }).then(response => {
        })
      }
    }
  }
}
</script>
